import React from 'react';
import _ from 'underscore';
import cx from 'classnames';

import dispatcher from 'lib/dispatcher';
import Modal from 'lib/components/Modal.jsx';
import Card from 'lib/components/card.jsx';
import GridWidget from 'lib/components/GridWidget.jsx';

import EventScope from './EventScope.es6';

export default class EventEditor extends Modal {
  propertyChanged(propertyName, valueFunction, e) {
    let newState = {};
    newState[propertyName] = valueFunction(e.target);

    dispatcher.dispatch({
      $type: 'property_changed',
      data: newState,
      name: propertyName
    });
  } // propertyChanged

  customPropertyChanged(propertyName, index, e) {
    let inputVlaue = e.target.value.trim();

    dispatcher.dispatch({
      $type: 'custom_property_changed',
      data: inputVlaue,
      index,
      name: propertyName
    });
  }

  saveHandler() {
    dispatcher.dispatch({
      $type: 'save_event'
    });
  }

  renderHeader(){
    return (
      <h4>编辑事件属性</h4>
    );
  } // renderHeader

  renderBody(){
    return (
      <div style={{ margin: '-15px', width: '768px' }}>
        <div className="widget-float form-group horizontal">
          <ul>
            <li>
              <label className="control-label">事件名</label>
              <div style={{
                float: 'left',
                width: '80%',
                height: '34px',
                padding: '7px 10px 5px 0px'
              }}>{ this.props.target.name }</div>
            </li>
            <li>
              <label className="control-label">事件中文名</label>
              <input
                className="input-text"
                type="text"
                maxLength="100"
                onChange={ this.propertyChanged.bind(this, 'cname', p => p.value.trim()) }
                defaultValue={ this.state.targetObject.cname } />
                <span className="msg-error">{ this.state.errors.cname }</span>
            </li>
            <li>
              <label className="control-label">隐藏事件</label>
              <input
                type="checkbox"
                style={{ marginTop: '10px' }}
                onChange={ this.propertyChanged.bind(this, 'visible', p => !p.checked) }
                defaultChecked={ !this.state.targetObject.visible } />
            </li>
          </ul>
        </div>
        <div className="horizontal-box">
          <div className="custom-title">自定义属性</div>
          <table className="table no-hover table-private">
            <thead>
              <tr>
                <th>属性名</th>
                <th>中文名称</th>
                <th>数据类型</th>
                <th>单位</th>
              </tr>
            </thead>
            <tbody>
              {
                this.state.customGrid.data.map((item, index) => {
                  return (
                    <tr key={ index }>
                      <td>{ item.name }</td>
                      <td>
                        <input
                          type="text"
                          className="input-text"
                          onChange={ this.customPropertyChanged.bind(this, 'cname', index) }
                          defaultValue={ item.cname } />
                        { this.state.errors.customGrid[index] ? (
                            <span className="msg-error">{ this.state.errors.customGrid[index].cname }</span>
                          ) : null }
                      </td>
                      <td>{ this.scope.dataTypeMapper[item.data_type] }</td>
                      <td>
                        {
                          item.data_type === 'number' ? (
                            <input
                              type="text"
                              className="input-text"
                              style={{ width: '60px' }}
                              onChange={ this.customPropertyChanged.bind(this, 'unit', index) }
                              defaultValue={ item.unit } />
                          ) : null
                        }
                      </td>
                    </tr>
                  )
                })
              }
            </tbody>
          </table>
          {
            /**
              <GridWidget
              extraClassName="no-hover table-private"
              oddColor={ false }
              cellRenderContainer={ this }
              cols={ this.state.customCols }
              store={ this.state.customGrid } />
             */
          }
        </div>
        <div className="horizontal-line" />
        <div className="horizontal-box">
          <div className="custom-title">预置属性</div>
          <GridWidget
            extraClassName="no-hover table-private"
            oddColor={ false }
            cellRenderContainer={ this }
            cols={ this.state.predefinedCols }
            store={ this.state.predefinedGrid } />
        </div>
      </div>
    );
  } // renderBody

  renderFooter(){
    return (
      <div className="text-align-right">
        <a href="javascript:;" onClick={this.close} style={{ marginRight: '20px' }}>取消</a>
        <button type="button" className={ cx({
          'btn-green': !this.state.inProcessing,
          'btn-disabled': this.state.inProcessing
        }) } onClick={ this.saveHandler }>保存</button>
      </div>
    );
  } // renderFooter
}

EventEditor.defaultProps = {
  Scope: EventScope,
  fixed: true
}
